<template>
    <div>
        <div style="float: left;display: flex;margin-bottom: 10px;">
            <el-input
                @clear="GeneratorForm_input"
                clearable
                prefix-icon="el-icon-search"
                placeholder="请输入表单内容"
                v-model="GeneratorFormPage.formContent"
                @keydown.enter.native="initGeneratorFormListQuery">
            </el-input>
            <el-input
                @clear="GeneratorForm_input"
                clearable
                style="margin-left: 8px;"
                prefix-icon="el-icon-search"
                placeholder="请输入表单描述"
                v-model="GeneratorFormPage.formDescription"
                @keydown.enter.native="initGeneratorFormListQuery">
            </el-input>
            <el-select style="margin-left: 8px;width:50%" v-model="GeneratorFormPage.isRelease" clearable placeholder="请选择">
                <el-option
                v-for="item in isReleases"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
            <el-button style="margin-left: 8px;" icon="el-icon-search" type="info" @click="initGeneratorFormListQuery">查询</el-button>
            <el-button
                type="primary"
                @click="resetCondition"><i class="el-icon-remove"></i><span>重置</span>
            </el-button>
        </div>
        <!-- 右 -->
        <div style="display: flex;justify-content: flex-end">
            <el-button
                type="primary"
                @click="addGeneratorForm"><i class="el-icon-plus"></i><span>新增表单</span>
            </el-button>
        </div>
        <!-- 下 -->
        <div class="pageList">
            <el-table
                :data="GeneratorFormList"
                stripe
                border
                style="width: 100%"
                v-loading="loading"
                element-loading-text="正在加载..."
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)"
                >
            <el-table-column
            type="selection"
            width="55">
            </el-table-column>
                <el-table-column
                        label="表名称"
                        width="200">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                            <p>表单编号: {{ scope.row.generatorId }}</p>
                            <p>表名称: {{ scope.row.tableName }}</p>
                            <p>表单描述: {{ scope.row.formDescription }}</p>
                            <p>所属类别: {{ scope.row.categoryName }}</p>
                            <p>创建时间: {{scope.row.createTime| dateFormat('YYYY-MM-DD HH:mm:ss')}}</p>
                            <p>是否部署:
                                <el-tag type="danger" v-if="scope.row.isRelease==1">未部署</el-tag>
                                <el-tag type="success" v-else>已部署</el-tag>
                            </p>
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium">{{ scope.row.tableName }}</el-tag>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column
                        label="所属类别"
                        width="250">
                    <template slot-scope="scope">
                        <span>{{ scope.row.categoryName }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="表单描述" :show-overflow-tooltip="true"
                        width="250">
                    <template slot-scope="scope">
                        <span>{{ scope.row.formDescription }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="是否部署" width="100">
                    <template slot-scope="scope">
                        <el-tag type="danger" v-if="scope.row.isRelease==1">未部署</el-tag>
                        <el-tag type="success" v-else>已部署</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        label="创建时间" width="250">
                    <template slot-scope="scope">
                        <span>{{scope.row.createTime| dateFormat('YYYY-MM-DD HH:mm:ss')}}</span>
                    </template>
                </el-table-column>
                 <el-table-column label="操作" width="575">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.isRelease==2"
                                disabled
                                title="表单已经部署无法操作"
                                type="text"
                                @click="updateGeneratorForm(scope.row)"><i class="el-icon-edit"></i><span>编辑</span></el-button>
                        <el-button v-if="scope.row.isRelease==1"
                                type="text"
                                @click="updateGeneratorForm(scope.row)"><i class="el-icon-edit"></i><span>编辑</span></el-button>
                        <el-button
                                type="text"
                                @click="releaseGeneratorForm(scope.row)"><i class="el-icon-edit-outline"></i><span>业务表设计</span></el-button>
                        <el-button
                                type="text"
                                @click="generatorFormView(scope.row)"><i class="el-icon-s-promotion"></i><span>表单可视化</span></el-button>
                        <el-button
                                v-if="scope.row.isRelease==1"
                                disabled
                                type="text"
                                title="删除业务表结构记录、删除普通表单和流程模型关系"
                                @click="restoreGeneratorForm(scope.row)"><i class="el-icon-circle-close"></i><span>撤销部署</span></el-button>
                        <el-button
                                v-if="scope.row.isRelease==2"
                                type="text"
                                title="删除业务表结构记录、删除普通表单和流程模型关系"
                                @click="restoreGeneratorForm(scope.row)"><i class="el-icon-circle-close"></i><span>撤销部署</span></el-button>
                        <el-button
                                type="text"
                                title="级联删除表单（相关业务、模型关系）"
                                @click="deleteActBtCategory(scope.row)"><i class="el-icon-delete"></i><span>删除表单</span></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="display: flex;justify-content: flex-end;margin-top: 8px;">
                <el-pagination
                        background
                        @current-change="currentChange"
                        @size-change="sizeChange"
                        layout="sizes, prev, pager, next, jumper, ->, total, slot"
                        :total="total">
                </el-pagination>
            </div>
        </div>
        <!-- 新增编辑弹框 -->
        <div>
            <el-dialog
                    :title="title_PutGeneratorForm"
                    :visible.sync="dialogVisible_PutGeneratorForm"
                    width="60%">
                <div>
                    <el-form :model="PutGeneratorForm" :rules="rules" ref="PutGeneratorFormForm">
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="表单名称:" prop="tableName">
                                    <el-input style="width: 250px" prefix-icon="el-icon-edit" v-model="PutGeneratorForm.tableName"
                                              placeholder="请输入表名称"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="表单描述:" prop="formDescription">
                                    <el-input style="width: 450px" prefix-icon="el-icon-edit" v-model="PutGeneratorForm.formDescription"
                                              placeholder="请输入表单描述"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col>
                                <el-form-item label="所属类别:" prop="categoryId">
                                    <tree-select style="margin-left: 100px;width: 815px;"
                                    :options="ProcessModelCategoryTreeList"
                                    placeholder="请选择所属类别"
                                    v-model="PutGeneratorForm.categoryId"
                                    />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col>
                                <el-form-item label="表单内容:" prop="formContent">
                                    <el-input
                                    type="textarea"
                                    rows="8"
                                    style="margin-right: 180px;width: 815px;"
                                    v-model="PutGeneratorForm.formContent"
                                    placeholder="请输入表单内容(必须是Json字符串)">
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible_PutGeneratorForm = false">取 消</el-button>
                    <el-button type="primary" @click="insertPutGeneratorFormRequest">确 定</el-button>
                </span>
            </el-dialog>
        </div>
        <!-- 表单可视化 -->
        <div>
            <div>
                <el-dialog
                title="表单可视化"
                :visible.sync="viewShow"
                width="30%"
                :before-close="handleClose"
                >
                <parser :form-conf="formConf" ref="parser"></parser>
                </el-dialog>
            </div>
        </div>
    </div>
</template>

<script>
import TreeSelect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import parser from 'form-gen-parser'
export default {
    inject:['reload'],
    name:"FormManager",
    components: { TreeSelect,parser },
    data(){
        // 表名称唯一性校验
        let validate = (rule, value, callback) => {
                let tableName = value;
                this.validateCode('/activity/GeneratorForm/query/GeneratorFormNameWhetherLegal?tableName='+tableName).then(resp=>{
                    if (resp && resp.data === true){
                        callback();
                    }else if (resp && resp.data === false && this.PutGeneratorForm.generatorId === ''){
                        callback("表名称已经存在!");
                    }else {
                        callback();
                    }
                })
        }
        return{
            loading:false,
            GeneratorFormList:[],
            GeneratorFormPage:{
                formContent: "",
                formDescription: "",
                isRelease: 0,
                pageNum: 0,
                pageSize: 0,
            },
            total: 0,
            isReleases:[{
                value: 0,
                label: '是否部署'
                },{
                value: 1,
                label: '未部署'
                },{
                value: 2,
                label: '已部署'
            }],
            dialogVisible_PutGeneratorForm: false,
            title_PutGeneratorForm: '',
            PutGeneratorForm:{
              tableName: '',
              categoryId: '',
              formDescription: '',
              formContent:'',
              generatorId: ''
            },
            ProcessModelCategoryTreeList:[],
            viewShow: false,
            formConf:{},
            // 校验规则
            rules: {
                tableName:[{required:true,message:'请输入表名称',trigger:'blur'},
                {validator:validate, trigger: 'blur'}],
                formDescription:[{required: true, message: '请输表单描述', trigger: 'blur'}],
                categoryId:[{required: true, message: '请选择所属类别', trigger: 'blur'}],
                formContent:[{required: true, message: '请输入表单内容', trigger: 'blur'}]
            }
        }
    },
    mounted(){
        this.initGeneratorFormListQuery();
    },
    methods:{
        handleClose(){
          this.viewShow = false;
          this.reload();
        },
        // 表单可视化
        generatorFormView(data){
          this.formConf = JSON.parse(data.formContent);
          if(this.formConf.length!=0){
            console.log(this.formConf);
            this.viewShow = true;
          }
        },
        initGeneratorFormListQuery(){
            this.loading = true;
            this.postRequest("/activity/GeneratorForm/query/GeneratorFormPageList",this.GeneratorFormPage).then(resp => {
                this.loading = false;
                if (resp) {
                    this.GeneratorFormList = resp.data.list;
                    this.total = resp.data.total;
                }
            });
        },
        // 重置查询条件
        resetCondition(){
            this.GeneratorFormPage.formContent = '';
            this.GeneratorFormPage.formDescription = '';
            this.GeneratorFormPage.isRelease = 0;
            this.initGeneratorFormListQuery();
        },
        // 分页
        sizeChange(currentSize) {
            this.GeneratorFormPage.pageSize = currentSize;
            this.initGeneratorFormListQuery();
        },
        currentChange(currentPage) {
            this.GeneratorFormPage.pageNum = currentPage;
            this.initGeneratorFormListQuery();
        },
        // 新增表单
        addGeneratorForm(){
          this.dialogVisible_PutGeneratorForm = true;
          this.title_PutGeneratorForm = "新增表单";
          this.initGeneratorForm();
          this.initGeneratorFormListQuery();
          this.queryBtAccountMenuInfoTreeList();
        },
        updateGeneratorForm(data){
            this.title_PutGeneratorForm = "编辑表单";
            this.dialogVisible_PutGeneratorForm = true;
            this.PutGeneratorForm = data;
            this.queryBtAccountMenuInfoTreeList();
        },
        // 初始化表单对象
        initGeneratorForm(){
            this.PutGeneratorForm.tableName='',
            this.PutGeneratorForm.categoryId='init_level',
            this.PutGeneratorForm.formDescription='',
            this.PutGeneratorForm.formContent='',
            this.PutGeneratorForm.generatorId=''
        },
         // 获取菜单目录
        queryBtAccountMenuInfoTreeList(){
            this.getRequest("/activity/ActBtCategory/query/ProcessModelCategoryTree").then(resp => {
                if (resp) {
                    let result = [];
                    let data = resp.data;
                    const children = this.getTree(data);
                    let obj = {}
                    obj.label = '所属类别'
                    obj.id = 'init_level'
                    obj.children = children
                    result.push(obj)
                    this.ProcessModelCategoryTreeList = result;
                }
            });
        },
        // 构建树形数据结构
        getTree (tree) {
            let arr = [];
            if (tree) {
            tree.forEach(item => {
                let obj = {};
                obj.label = item.categoryName;
                obj.id = item.categoryId;
                if(item.children&&item.children.length!==0) {
                   obj.children = this.getTree(item.children);
                }
                arr.push(obj);
            });
        }
            return arr;
        },
        // @Clear
        GeneratorForm_input(){

        },
        // 添加表单
        insertPutGeneratorFormRequest(){
            if (this.PutGeneratorForm.generatorId) {
                    this.$refs['PutGeneratorFormForm'].validate(valid => {
                        if (valid) {
                            this.putRequest("/activity/GeneratorForm/update/GeneratorForm", this.PutGeneratorForm).then(resp => {
                                if (resp) {
                                    this.dialogVisible_PutGeneratorForm = false;
                                    this.initGeneratorForm();
                                    this.initGeneratorFormListQuery();
                                }
                            })
                        }
                    });
            } else {
                this.$refs['PutGeneratorFormForm'].validate(valid => {
                    if (valid) {
                        this.postRequest("/activity/GeneratorForm/insert/GeneratorForm", this.PutGeneratorForm).then(resp => {
                            if (resp) {
                                // 关闭弹框
                                this.dialogVisible_PutGeneratorForm = false;
                                this.initGeneratorForm();
                                // 初始化列表
                                this.initGeneratorFormListQuery();
                            }
                        })
                    }
                });
            }
        },
        // 删除表单（相关业务、模型关系）
        deleteActBtCategory(data){
            this.$confirm('此操作将永久删除【'+data.tableName+'】, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    this.deleteRequest('/activity/GeneratorForm/delete/GeneratorFormByGeneratorId/'+data.generatorId).then(resp=>{
                    if (resp){
                        this.initGeneratorFormListQuery();
                    }
                })
            }).catch(() => {
                this.$message({
                type: 'info',
                message: '已取消删除'
                });
            });
        },
        // 撤销部署
        restoreGeneratorForm(data){
            this.$confirm('此操作将撤销【'+data.tableName+'】部署, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    this.deleteRequest('/activity/GeneratorForm/delete/DeployGeneratorForm/'+data.generatorId).then(resp=>{
                    if (resp){
                        this.initGeneratorFormListQuery();
                    }
                })
            }).catch(() => {
                this.$message({
                type: 'info',
                message: '已取消删除'
                });
            });
        },
        // 部署模块（数据库业务表设计）
        releaseGeneratorForm(data){
           this.$router.push({
               path: '/generatorFormInner',
               // 参数传递
               query: {
                   generatorFormOne: JSON.stringify({
                            generatorId: data.generatorId,
                            tableName: data.tableName,
                            isRelease: data.isRelease
                       })
               }
           })
        }
    }
}
</script>

<style>

</style>
